<template>
  <!-- 订单签字确认 -->
  <view class="order-confirm">
    <view class="main">
      <view class="tabs-box">
        <u-tabs
          :list="tabTitleList"
          active-color="#FBB000"
          inactive-color="#666"
          font-size="28"
          :is-scroll="false"
          bar-height="8"
          bar-width="110"
          :height="100"
          :duration="0.2"
          :current="current"
          @change="tabChange"
        ></u-tabs>
      </view>

      <view class="wrap">
        <!-- 扫码确认 -->
        <view v-show="current === 0" class="tab-content">
          <view class="title">客户使用7迈车APP/微信扫码确认</view>

          <view class="content">
            <view class="text">客户登录手机号：{{ phone }}</view>
            <view class="qr-code">
              <image :src="qrcode" mode="widthFix" class="img"></image>
            </view>
          </view>
        </view>

        <!-- 远程确认 -->
        <view v-show="current === 1" class="tab-content">
          <view class="title">给客户发送短信</view>

          <view class="content">
            <view class="phone-num">
              <i-icon type="m" icon="icongouxuan" size="40rpx"></i-icon>
              <text class="num">{{ phone }}</text>
            </view>
            <!-- <input type="text" > -->
          </view>
        </view>
      </view>
    </view>

    <!-- 确认发送按钮 -->
    <view v-show="current === 1" class="btn-send">
      <button class="btn-bg-yellow" @click="$u.throttle(sendMsg, 500)">
        确认发送
      </button>
    </view>
    
    <!-- 发布上架成功弹框 -->
    <u-popup
      v-model="successShow"
      mode="center"
      border-radius="30"
      width="400"
      :mask-close-able="false"
    >
      <!-- 完成报价弹窗 -->
      <view class="successPoup">
        <view class="top">
          <image src="/static/img/accessory/success.png"></image>
        </view>
        <view class="main">
          <view class="title">客户确认成功</view>
          <view class="con">客户已完成扫码确认</view>
          <view class="btn" @click="ok()"> 我知道了 </view>
        </view>
      </view>
    </u-popup>

    <!-- 底部固定按钮 -->
    <!-- <view v-show="current === 0" class="btn-box flex flex-ai-c">
      <view class="btn" @click="goSignaturePage()">
        <i-button
          text="手动签字确认"
          bg-color="#333"
          color="#FFE23E"
          shape="circleLeft"
        ></i-button>
      </view>
      <view class="btn" @click="submit()">
        <i-button
          text="客户已扫码确认"
          color="#333"
          shape="circleRight"
        ></i-button>
      </view>
    </view> -->
  </view>
</template>

<script>
import iButton from '@/components/carGoods/i-button.vue'

export default {
  components: { iButton },
  data() {
    return {
      datas: {},
      orderId: '', // 订单id(报价单id)
      // tab标题
      tabTitleList: [
        { name: '扫码确认' },
        { name: '远程确认' },
        { name: '签字确认' },
      ],
      current: 0, // 当前tab
      qrcode: '',
      successShow: false, // 扫码确认成功弹框
      t: null, // 定时器
    }
  },

  computed: {
    orderParams() {
      return this.$store.state.afterSales.signData
    },

    phone() {
      return this.$store.state.afterSales.arrvialPhone
    },
  },

  onLoad(e) {
    this.datas = JSON.parse(e.typeOptions)
    this.datas.fnName = 'submitOrderSign'
    this.orderId = e.id
    this.getDetailData()
  },
  
  onShow() {
    // 发起轮询检查扫码确认
    this.getOrderStatus()
  },
  
  onHide() {
    // 清除轮询请求的定时器
    clearInterval(this.t)
  },
  
  beforeDestroy() {
    // 清除轮询请求的定时器
    clearInterval(this.t)
  },

  methods: {
    tabChange(i) {
      if (i === 2) {
        this.goSignaturePage()
      } else {
        this.current = i
      }
    },

    // 请求订单详情，获取确认二维码
    async getDetailData() {
      uni.showLoading()
      try {
        const res = await this.$api.afterSales.GetQuotationDetail({
          quotationId: this.orderId,
        })
        this.qrcode = res.data.sureImg // 二维码图
      } catch (err) {
        console.log(err)
      }
      uni.hideLoading()
    },

    // 跳转到签字页
    goSignaturePage() {
      const str = JSON.stringify(this.datas)
      const id = this.orderId ? `&id=${this.orderId}` : ''
      uni.navigateTo({
        url: '/pages_afterSales/signature/signature?typeOptions=' + str + id,
      })
    },

    // 确认扫码
    submit() {
      uni.$emit('userConfirm', {
        userName: '',
      })
      uni.navigateBack({
        delta: this.datas.count - 1,
      })
    },

    // 订单确认 - 发送短信
    async sendMsg() {
      try {
        const res = await this.$api.afterSales.SendSureQuatationPhoneMsg({
          mobile: this.phone,
          orderId: this.orderId
        })
        uni.showToast({
          title: '短信已发送',
          icon: 'none',
        })
      } catch (e) {
        console.log(e)
      }
    },
    
    // 轮询请求检查扫码确认是否成功
    getOrderStatus() {
      this.t = setInterval(async () => {
        try {
          const res = await this.$api.afterSales.GetOrderStatus(this.orderId)
          if (res.data === 5) {
            this.successShow = true
            clearInterval(this.t)
          }
        } catch (e) {
          clearInterval(this.t)
          //TODO handle the exception
        }        
      }, 2000)
    },
    
    // 我知道了 客户已扫码确认
    ok() {
      this.successShow = false
      uni.navigateBack()
    }
  },
}
</script>

<style lang="scss" scoped>
.order-confirm {
  background-color: #f4f4f4;
  min-height: 100%;
  
  & /deep/ .u-mode-center-box {
    background-color: transparent;
  }
}

.main {
  padding: 24rpx;

  .tabs-box {
    background: #ffffff;
    border-radius: 10rpx;
    overflow: hidden;
  }

  .tab-content {
    padding: 0 20rpx;
    margin-top: 14rpx;
    background-color: #ffffff;
    border-radius: 10rpx;

    .title {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 26rpx;
      color: #999999;
      text-align: center;
      border-bottom: 1px solid #eee;
    }

    .content {
      .text {
        padding: 50rpx 0;
        font-size: 30rpx;
        color: #333333;
        text-align: center;
      }

      .qr-code {
        padding: 0 100rpx 80rpx;

        .img {
          width: 100%;
        }
      }
    }

    // 远程确认 - 手机号
    .phone-num {
      height: 118rpx;
      line-height: 118rpx;

      .i-icon {
        vertical-align: middle;
      }

      .num {
        margin-left: 20rpx;
        vertical-align: middle;
        font-size: 32rpx;
        color: #333;
      }
    }
  }
}

// 发送按钮
.btn-send {
  padding: 0 24rpx;

  button {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    margin: 100rpx 0 0;
    font-size: 32rpx;
    color: #333;
  }
}

// 底部按钮
.btn-box {
  position: fixed;
  bottom: 0;
  z-index: 6;
  width: 100%;
  height: 120rpx;
  padding: 0 24rpx;
  background-color: #fff;

  .btn {
    width: 50%;

    .i-button {
      width: 100%;
    }
  }
}

// 发布成功弹框
.successPoup {
  width: 100%;
  position: relative;

  .top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 999;
    text-align: center;

    image {
      width: 235rpx;
      height: 204rpx;
    }
  }

  .main {
    padding-top: 170rpx;
    padding-bottom: 80rpx;
    background: #ffffff;
    border-radius: 30rpx;
    transform: translateY(40rpx);

    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      text-align: center;
    }
    .con {
      margin: 20rpx 0 46rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
      text-align: center;
    }
    .btn {
      background: linear-gradient(-90deg, #fbd220, #ffe23e);
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      width: 240rpx;
      border-radius: 44rpx;
      color: #333;
      font-weight: 500;
      margin: 0 auto;
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
